<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const show = defineModel('show')

/**
 * 表单
 */
const categoryList = ['玄幻', '言情', '都市', '科幻']
const templateList = ['龙傲天', '穿越', '无敌', '废柴']
const getSourceData = () => ({
  name: null,
  category: null,
  template: null
})
const formData = ref(getSourceData())
const formRules = {
  name: [{ required: true, message: '不能为空', trigger: 'blur' }]
}
const formRef = ref(null)

/**
 * 跳转
 */
const router = useRouter()
async function handleConfirm() {
  const pass = await formRef.value.validate()
  handleDialogClose()
  pass && router.push('/home')
}
function handleDialogClose() {
  formData.value = getSourceData()
}
</script>
<template>
  <el-dialog
    title="新建工程"
    :close-on-click-modal="false"
    v-model="show"
    destroy-on-close
    @close="handleDialogClose"
  >
    <div class="content">
      <el-form :model="formData" ref="formRef" label-width="100px" :rules="formRules">
        <el-form-item label="工程名" prop="name">
          <el-input v-model="formData.name"></el-input>
        </el-form-item>
        <el-form-item label="分类">
          <el-select v-model="formData.category" placeholder="分类">
            <el-option
              v-for="item in categoryList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模版">
          <el-select v-model="formData.template" placeholder="模版">
            <el-option
              v-for="item in templateList"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="show = false">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="less" scoped>
.content {
  margin-top: 50px;
  margin-bottom: 100px;
  padding-right: 100px;
}
</style>
